<template>
  <view class="content ss-flex ss-col-top">
	<view class="leftBox ss-flex-col">
		<view class="leftBox-shop" :style="{color:data.shop.color}">
			{{data.shop.text}}
		</view>
		<view class="leftBox-btn" :style="{color:data.btn.color,background:data.btn.bgColor}" @click="onBtn">
			{{data.btn.text}}
		</view>
		<view class="leftBox-roll">
			<view :style="transitionStyle">
				<template v-for="(item,index) in rollList" :key="`${item.text}-${index}`">
					<view class="ss-flex">
						<image class="leftBox-roll-avatar ss-m-r-4" :src="sheep.$url.cdn(item.avatar)" mode="aspectFill" />
						<view class="leftBox-roll-tips  ss-line-1">
							{{item.text}}
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
	<view class="rightBox ss-flex ss-flex-1 ss-m-l-10 ss-m-t-10">
		<view class="rightBox-item ss-flex-1 ss-flex-col ss-col-center"  @click="onTap(data.hotData)">
			<su-image :src="(state?.goodsList1&&state?.goodsList1.length>0) ? state.goodsList1[0].image :''"  width="100" height="100" mode="aspectFill"/>
			<view class="rightBox-item-title ss-line-1" :style="{color: data.hotData.color}">
				{{data.hotData.text}}
			</view>
		</view>
		<view class="rightBox-item ss-flex-1 ss-flex-col ss-col-center"  @click="onTap(data.newData)">
			<su-image :src="(state?.goodsList2&&state?.goodsList2.length>0) ? state.goodsList2[0].image :''"  width="100" height="100" mode="aspectFill"/>
			<view class="rightBox-item-title ss-line-1" :style="{color: data.newData.color}">
				{{data.newData.text}}
			</view>
		</view>
		<view class="rightBox-item ss-flex-1 ss-flex-col ss-col-center"  @click="onTap(data.seckillData)">
			<su-image :src="(state?.goodsList3&&state?.goodsList3.length) ? state?.goodsList3[0].image :''"  width="100" height="100" mode="aspectFill"/>
			<view class="rightBox-item-title ss-line-1" :style="{color: data.seckillData.color}">
				{{data.seckillData.text}}
			</view>
		</view>
	</view>
  </view>
</template>

<script setup>
  /**
   * 图片组件
   */
  import sheep from '@/sheep';
  import { onHide ,onShow} from "@dcloudio/uni-app"
  import { ref, computed, reactive, onMounted } from 'vue';
  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    styles: {
      type: Object,
      default: () => ({}),
    },
  });
  const rollList =[
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户v*获得1.2元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户a**获得1.4元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户v*获得0.5元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户n*获得0.88元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户e*获得0.2元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户v*获得3.2元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户t**获得1.1元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户y*获得0.14元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户u*获得0.28元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户o*获得0.12元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户v*获得1.2元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户a**获得1.4元分佣'
	  },
	  {
		  avatar:'/static/img/default_avatar.png',
		  text:'用户v*获得0.5元分佣'
	  },
  ]
  let transitionStyle = ref('')
  const state = reactive({
	timer:null,
    goodsList1: [],
    goodsList2: [],
    goodsList3: [],
  });
  onMounted(async () => {
    state.goodsList1 = await getGoodsListByIds(props.data?.hotGoodsIds.join(','));
    state.goodsList2 = await getGoodsListByIds(props.data?.newGoodsIds.join(','));
    state.goodsList3 = await getGoodsListByIds(props.data?.seckillGoodsIds.join(','));
  	startScroll()
  });
  onHide(() => {
  	transitionStyle.value = ''
  	clearInterval(state.timer)
  	state.timer = null
  })
  onShow(()=>{
	  startScroll()
  })
  function startScroll(){
  	// 主要通过 transition 的过度时间 控制 滚动速度
  	setTimeout(() => {
  		transitionStyle.value = 'transition: all 8s linear 0s;transform: translateY(-50%);'
		if(state.timer) return
  		state.timer = setInterval(() => {
  			transitionStyle.value = ''
  			setTimeout(() => {
  				transitionStyle.value = 'transition: all 8s linear 0s;transform: translateY(-50%);'
  			}, 10)
  		}, 8000)
  	}, 10)
  }
  async function getGoodsListByIds(ids) {
    let { data } = await sheep.$api.goods.ids({ ids });
  	
    return data;
  }
  function onBtn(){
	  sheep.$router.go(props.data.btn.url)
  }
  function onTap(item){
	  if(item.url){
		  sheep.$router.go(item.url)
	  }else{
		  uni.showToast({
		  	title:'暂未开放',
			icon:'none'
		  })
	  }
  }
</script>

<style lang="scss" scoped>
	.content{
		height: 220rpx;
		box-sizing: border-box;
		padding: 24rpx 24rpx 0;
		.leftBox{
			width: 220rpx;
			.leftBox-shop{
				text-align: center;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: normal;
				color: #202020;
			}
			.leftBox-btn{
				width: 170rpx;
				margin: 10rpx auto 0;
				border-radius: 20rpx;
				height: 44rpx;
				text-align: center;
				line-height: 44rpx;
			}
			.leftBox-roll{
				margin-top: 10rpx;
				height: 86rpx;
				overflow: hidden;
				 mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
				  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
				.leftBox-roll-avatar{
					margin-top: 4rpx;
					width: 36rpx;
					min-width: 36rpx;
					height: 36rpx;
					border-radius: 40rpx;
				}
				.leftBox-roll-tips{
					margin-top: 4rpx;
					font-size: 20rpx;
				}
			}
		}
		.rightBox{
			.rightBox-item{
				.rightBox-item-title{
					margin-top: 16rpx;
					font-family: Source Han Sans;
					font-size: 26rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #202020;
				}
				.rightBox-item-price{
					margin-top: 4rpx;
					font-family: Source Han Sans;
					font-size: 22rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #FF5555;
				}
			}
		}
	}
</style>
